<%--
  Created by IntelliJ IDEA.
  User: 您的名字
  Version: 1.0
 --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<html>
<head>
    <title>EasyUI CRUD 示例页面</title>
    <meta charset="UTF-8">
    <base href="<%=request.getContextPath()%>/">
    <!-- 引入 EasyUI 的默认主题样式 -->
    <link rel="stylesheet" type="text/css" href="static/js/easyui/themes/bootstrap/easyui.css">
    <!-- 引入 EasyUI 的图标样式 -->
    <link rel="stylesheet" type="text/css" href="static/js/easyui/themes/icon.css">
    <!-- 引入自定义的公共CSS -->
    <link rel="stylesheet" type="text/css" href="static/css/common.css"/>
    <!-- 引入省市区的公共CSS -->
    <link rel="stylesheet" type="text/css" href="static/css/address.css"/>
    <!-- 引入 EasyUI 默认的 jQuery（无需单独引入 jQuery） -->
    <script src="static/js/easyui/jquery.min.js"></script>
    <!-- 引入 EasyUI 的核心 JS 文件 -->
    <script src="static/js/easyui/jquery.easyui.min.js"></script>
    <!-- 引入 EasyUI 的中文语言包 -->
    <script src="static/js/easyui/locale/easyui-lang-zh_CN.js"></script>
    <!-- 引入自定义的公共脚本 -->
    <script src="static/js/owner/common.js"></script>
    <!-- 引入自定义的公共脚本 -->
    <script src="static/js/owner/dataGrid.js"></script>
    <!-- 引入省市区的公共脚本 -->
    <script src="static/js/owner/address.js"></script>
    <script src="static/js/owner/city_code.js"></script>
    <!-- 引入 moment.js 库，用于处理日期和时间 -->
    <script src="static/js/owner/moment.min.js"></script>
    <!-- daterangepicker 是一个日期范围选择插件，支持选择开始和结束日期 -->
    <link rel="stylesheet" href="static/css/daterangepicker.css">
    <!-- 引入 daterangepicker 的脚本文件 -->
    <script src="static/js/owner/daterangepicker.js"></script>
</head>

<body>
<!-- 工具栏 -->
<div id="toolbar">
    <!-- 查询表单 -->
    <form id="searchForm" class="custom-search-form">
        <div class="custom-search-form__group">
            <label>菜单名称:</label>
            <input class="easyui-textbox" name="text">
        </div>
        <div class="custom-search-form__group">
            <label>状态:</label>
            <input name="bili" class="easyui-combobox" data-options="
                valueField: 'ourId',
                textField: 'ourValue',
                data: [
                    {ourValue: '禁用', ourId: '0'},
                    {ourValue: '启用', ourId: '1'}
                ],
                panelHeight: 'auto',
                editable: false,
                prompt: '请选择'
            ">
        </div>
        <div class="custom-search-form__actions">
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" onclick="searchData()">查询</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-reload" onclick="resetSearch({excludeIds: ['status'], reload: true})">重置</a>
        </div>
    </form>
    <!-- 操作按钮 -->
    <div style="margin-top: 20px;margin-bottom: 10px">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newMenu()">新增</a>
        <a href="javascript:void(0)" id="editBtn" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editMenu()">编辑</a>
        <a href="javascript:void(0)" id="delBtn" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyMenu()">删除</a>
        <a href="javascript:void(0)" id="refreshBtn" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="reload()">刷新</a>
    </div>
</div>

<!-- 数据表格 -->
<table id="menuTreeGrid"></table>


<!-- 对话框，用于新增和编辑记录 -->
<div id="dlg" class="easyui-dialog custom-dlg" style="width:800px" data-options="closed:true,modal:true,border:'thin',buttons:'#dlg-buttons'">
    <form id="fm" method="post" class="custom-dlg-form" enctype="multipart/form-data" novalidate style="margin:0;padding:20px">
        <!-- 隐藏的字段 -->
        <%--<input type="hidden" name="parentId">--%>
        <input type="hidden" name="id">

        <div class="form-container">
            <div class="form-column">
                <!-- 菜单名称 -->
                <div class="form-group">
                    <label>菜单名称:</label>
                    <input name="text" class="easyui-textbox" required="true" style="width:100%">
                </div>
                <!-- 状态 -->
                <div class="form-group">
                    <label>状态:</label>
                    <input name="status" class="easyui-combobox" data-options="
                        valueField:'id',textField:'text',
                        data:[
                            {id: '0', text: '禁用'},
                            {id: '1', text: '启用'},
                        ],
                        editable: false,
                        prompt: '请选择状态',
                        panelHeight:'auto'" style="width:100%">
                </div>
                <!-- 排序编号 -->
                <div class="form-group">
                    <label>排序编号:</label>
                    <input name="orderNum" class="easyui-numberbox" precision="0" value="0" style="width:100%">
                </div>
                <!-- 备注 -->
                <div class="form-group">
                    <label>备注:</label>
                    <input name="remark" class="easyui-textbox" style="width:100%">
                </div>
            </div>

            <div class="form-column">
                <!-- 路径 -->
                <div class="form-group">
                    <label>路径:</label>
                    <input name="url" class="easyui-textbox" style="width:100%">
                </div>
                <!-- 父级节点id -->
                <div class="form-group">
                    <label>父级节点id:</label>
                    <input name="menusId" id="comboTree" style="width:100%">
                </div>
            </div>
        </div>
    </form>
    <!-- 对话框的按钮 -->
    <div id="dlg-buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveMenu()">保存</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">取消</a>
    </div>
</div>

</body>

<!-- 定义页面脚本 -->
<script type="text/javascript">
    var url; // 定义全局变量，保存当前操作的URL
    let $comboTree = $('#comboTree');

    $(function () {
        $('#menuTreeGrid').treegrid({
            url: 'menu/selectMenuNode',
            method: 'get',
            idField: 'id',
            treeField: 'text',
            columns: [[
                {field:'ck',checkbox:true,width:50},
                {field:'id',title:'ID',width:50},
                {field:'text',title:'菜单名称',width:150},
                {field:'url',title:'路径',width:200},
                {field:'status',title:'状态',width:60, formatter: function(value){ return value == 1 ? '启用' : '禁用'; }},
                {field:'orderNum',title:'排序编号',width:80}
            ]],
            fit: true,
            rownumbers: true,
            fitColumns: true,     // 启用列宽自动适应
            pagination: false,    // 不使用分页
            singleSelect: true,
            toolbar: '#toolbar',   // 关联工具栏
            loadFilter: function (data) {
                if (data && data.extend && data.extend.menus) {
                    return data.extend.menus;
                }
                // 如果数据格式不正确，返回空数据
                return [];
            },
            onClickRow: function (node) {//点击事件, 不是点击小箭头
                handleNodeClick(node);
            },
        });
    });

    // 没有选中时 || 中多条数据时, 禁用哪些按钮
    function disable() {
        $('#editBtn').linkbutton('disable');
        $('#delBtn').linkbutton('disable');
    }

    // 选中一条数据时启用哪些按钮
    function enable() {
        $('#editBtn').linkbutton('enable');
        $('#delBtn').linkbutton('enable');
    }

    function initComboTree() {
        // 获取当前选中的菜单ID
        var currentMenuId = null;
        var row = $('#menuTreeGrid').treegrid('getSelected');
        if(row) {
            currentMenuId = row.id;
        }

        $comboTree.combotree({
            url: 'menu/selectMenuNode',
            method: 'get',
            multiple: false,               //不允许多选
            checkbox: false,               //不显示复选框
            lines: false,                 // 显示连接线
            editable: false,              // 不允许编辑
            panelMaxHeight: 200,          // 固定最大高度为200px
            valueField: 'id',             // 值字段
            textField: 'text',            // 文本字段
            cascadeCheck: false,          // 取消级联选中，避免自动勾选父节点
            onlyLeafCheck: false,         // 所有节点都可以选中
            loadFilter: function (data) {
                if (data && data.extend && Array.isArray(data.extend.menus)) {
                    return data.extend.menus;
                }
                return data;
            },
            onBeforeSelect: function(node) {
                //如果是新增菜单, 则直接return
                if (url === 'menu/add') {
                    return true;
                }

                // 避免将当前菜单设为自己的父节点
                if(currentMenuId && node.id === currentMenuId) {
                    $.messager.alert('警告', '不能选择自己作为父节点！', 'warning');
                    return false;
                }

                // 避免选择当前菜单的子节点作为父节点（防止循环依赖）
                if(currentMenuId) {
                    var children = getAllChildrenIds($('#menuTreeGrid'), currentMenuId);
                    if(children.indexOf(node.id) !== -1) {
                        $.messager.alert('警告', '不能选择当前菜单的子节点作为父节点！', 'warning');
                        return false;
                    }
                }

                return true;
            },
            onLoadSuccess: function (node, data) {
                console.log("加载成功时检查后端返回的数据: ", data);
                // 底层机制仍然是懒加载，我们只是添加了自动展开所有节点的行为
                var tree = $comboTree.combotree('tree');
                if (tree) {
                    // 获取所有根节点
                    var roots = tree.tree('getRoots');
                    if (roots && roots.length > 0) {
                        // 遍历并展开所有根节点
                        for (var i = 0; i < roots.length; i++) {
                            // 展开根节点
                            tree.tree('expand', roots[i].target);
                            // 递归展开所有子节点
                            expandAllNodes(tree, roots[i]);
                        }
                    }
                }
            }
        });
    }

    // 获取指定节点的所有子节点ID
    function getAllChildrenIds(treeGrid, nodeId) {
        var result = [];
        var children = treeGrid.treegrid('getChildren', nodeId);

        if(children && children.length > 0) {
            for(var i = 0; i < children.length; i++) {
                result.push(children[i].id);
            }
        }

        return result;
    }

    // 递归展开所有节点
    function expandAllNodes(tree, node) {
        // 展开当前节点
        tree.tree('expand', node.target);

        // 获取当前节点的所有子节点
        var children = tree.tree('getChildren', node.target);
        if (children && children.length > 0) {
            // 遍历所有子节点
            for (var i = 0; i < children.length; i++) {
                // 递归展开子节点
                expandAllNodes(tree, children[i]);
            }
        }
    }

    // 处理节点点击事件
    function handleNodeClick(node) {
        // 检查节点是否为空
        if (!node) {
            console.warn("点击的节点为空");
            return;
        }

        // 判断节点是否为父节点
        if (!node.url || (node.children && node.children.length > 0)) {
            // 是父节点，切换展开/折叠状态
            if (node.state === 'closed') {
                $('#menuTreeGrid').treegrid('expand', node.id);
            } else {
                $('#menuTreeGrid').treegrid('collapse', node.id);
            }
            return;  // 父节点仅切换展开状态
        }
    }


    function newMenu(){
        var row = $('#menuTreeGrid').treegrid('getSelected');
        console.log("newMenu row===============", row)

        $('#dlg').dialog('open').dialog('setTitle','新增菜单').window('center');
        $('#fm').form('clear');
        url = 'menu/add';

        initComboTree();
    }

    function editMenu(){
        var row = $('#menuTreeGrid').treegrid('getSelected');
        console.log("editMenu row===========", row);
        if (row){
            $('#dlg').dialog('open').dialog('setTitle','编辑菜单').window('center');
            $('#fm').form('clear');

            // 初始化下拉树
            initComboTree();

            // 延迟加载表单数据，确保combotree已经初始化完成
            setTimeout(function() {
                // 加载表单数据
                $('#fm').form('load', row);
                // 设置父级节点
                if(row.parentId) {
                    $('#comboTree').combotree('setValue', row.parentId);
                    console.log("设置父级节点ID:", row.parentId);
                }
            }, 500);

            url = 'menu/update';
        }
    }

    function saveMenu(){
        $('#menuTreeGrid').treegrid();
        // 获取表单数据
        var formData = $('#fm').form('serializeObject');

        // 获取父节点ID
        var parentId = $('#comboTree').combotree('getValue');
        if(parentId) {
            formData.parentId = parentId;
        } else {
            // 如果未选择父节点，设置为根节点(null或0，取决于后端实现)
            formData.parentId = null;
        }

        console.log("formData.text========", formData.text);
        console.log("saveMenu formData===============", formData);

        $.ajax({
            url: url,
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(formData),//不转成json自动转成url拼接
            success: function(result){
                if(result.code == '200'){
                    $('#dlg').dialog('close');
                    $.messager.alert('信息', result.msg, 'info');
                    // 安全调用父窗口的reload方法
                    if (window.parent && typeof window.parent.reload === 'function') {
                        window.parent.reload(formData.parentId || null);
                    }
                    // 刷新当前树
                    if (formData.parentId) {
                        $('#menuTreeGrid').treegrid('reload', formData.parentId);
                    } else {
                        $('#menuTreeGrid').treegrid('reload');
                    }
                }  else {
                    $.messager.alert('错误', result.msg, 'error');
                }
            }
        });
    }

    function destroyMenu(){
        let row = $('#menuTreeGrid').treegrid('getSelected');
        if (!row) {
            $.messager.alert('提示', '请先选择要删除的节点', 'info');
            return;
        }

        let childrens = $('#menuTreeGrid').treegrid('getChildren', row.id);

        if (row){
            if (row.hasChildren == true || childrens.length > 0) {
                $.messager.alert('警告', '不能删除有子节点的菜单', 'warning');
                return
            }

            $.messager.confirm('确认','您确认要删除该菜单吗?',function(r){
                if (r){
                    $.ajax({
                        url: 'menu/delete',
                        type: 'POST',
                        data: {id: row.id},
                        success: function(result){
                            if(result.code == '200'){
                                // 安全调用父窗口的reload方法
                                if (window.parent && typeof window.parent.reload === 'function') {
                                    window.parent.reload(row.parentId || null);
                                }

                                // 刷新当前树
                                if (row.parentId) {
                                    $('#menuTreeGrid').treegrid('reload', row.parentId);
                                } else {
                                    $('#menuTreeGrid').treegrid('reload');
                                }
                                $.messager.alert('信息', result.msg, 'info');
                            }  else {
                                $.messager.alert('错误', result.msg, 'error');
                            }
                        }
                    });
                }
            });
        }
    }

    function reload() {
        var row = $('#menuTreeGrid').treegrid('getSelected');
        if (row) {
            // 如果选中了节点，刷新该节点
            $('#menuTreeGrid').treegrid('reload', row.id);
        } else {
            // 如果没有选中节点，刷新整个树
            $('#menuTreeGrid').treegrid('reload');
        }
    }
</script>
</body>
</html>
